<template>
  <div>
    <header :class="['header', isHide ? 'bgHide' : 'bg']">
      <nav class="nav flex">
        <ul>
          <div class="nav-logo" v-if="logo">
            <img :src="logo" alt="" />
          </div>
        </ul>
        <ul>
          <li v-for="(item, index) in navs" :key="index">
            <router-link :to="item.to">{{ item.name }}</router-link>
          </li>
          <li @click="searchKey">
            <a><i class="el-icon-search"></i></a>
          </li>
        </ul>
      </nav>
    </header>
    <Search ref="Seek"></Search>
  </div>
</template>
<script>
import { getInfo } from "@/apiv/config";
import Search from "@/view/Search.vue";
export default {
  components: {
    Search,
  },
  data() {
    return {
      logo: "",
      i: 0,
      isHide: true,
      isShow: false,
      navs: [
        { to: "/", name: "首页" },
        { to: "/category", name: "分类" },
        // { to: "/leave", name: "留言" },
        // { to: "/logs", name: "日志" },
        { to: "/demos", name: "实验室" },
        { to: "/about", name: "关于我" },
        { to: "/links", name: "友链" },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    this.handleScroll();
    getInfo().then((res) => (this.logo = res.data.logo));
  },
  methods: {
    //搜索引擎
    searchKey() {
      this.$refs.Seek.hideControl();
    },
    //滚动监听
    handleScroll() {
      let scrollTop =
        window.pageXOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let scroll = scrollTop - this.i;
      // console.log(scroll, "scroll");
      if (scroll > 180) {
        this.isHide = false;
      } else {
        this.isHide = true;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.nav-logo {
  width: 135px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
.header {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 70px;
  font-weight: bold;
  nav {
    width: 1040px;
    height: 70px;
    margin: 0 auto;
    ul {
      list-style: none;
      display: flex;
      align-items: center;
    }
    ul:first-child {
      color: white;
      margin-right: auto;
    }
    ul:nth-child(2) {
      display: flex;
    }
    ul:nth-child(2) > li {
      margin: 0 15px;
    }
    a {
      cursor: pointer;
      text-decoration: none;
      font-weight: bold;
      color: white;
      font-size: 16px;
    }
    a:hover {
      color: #eb5055;
    }
  }
}
.bgHide {
  background: transparent;
}
.bg {
  background-color: #12121c;
}
</style>